<template>
  <view class="method">
    <BaseNavBar></BaseNavBar>
    <view
      class="search flex-column-center pl-22"
      :style="{
        marginTop: capsuleInfo?.top - safeAreaInsets?.top + 'px',
      }"
      ><wd-icon name="chevron-left" size="22px" @click="backTo"></wd-icon>
    </view>
    <view class="image-info mt-30 flex-column">
      <wd-img
        width="168"
        height="168"
        mode="aspectFill"
        radius="8"
        :enable-preview="true"
        :src="methodInfo.url"
      >
        <template #loading v-if="!methodInfo.url">
          <view class="error-wrap flex-center">
            <span class="text" style="--i: 1">暂</span>
            <span class="text" style="--i: 2">无</span>
            <span class="text" style="--i: 3">图</span>
            <span class="text" style="--i: 4">片</span>
            <span class="text" style="--i: 5">,</span>
            <span class="text" style="--i: 6">制</span>
            <span class="text" style="--i: 7">作</span>
            <span class="text" style="--i: 8">中</span>
            <span class="text" style="--i: 9">~</span>
          </view>
        </template>
      </wd-img>
      <span class="name mt-10">{{ methodInfo.name }}</span>
    </view>
    <view class="ingredients flex mt-30">
      <span class="label">所需食材：</span>
      <view class="value">
        <wd-tag
          type="primary"
          custom-class="tag-class ml-10"
          plain
          v-for="(item, index) of methodInfo.ingredients"
          :key="index"
          >{{ item }}</wd-tag
        >
      </view>
    </view>

    <view class="steps mt-30">
      <span class="label">步骤：</span>
      <view class="content flex-column">
        <view
          class="step-item flex mt-20"
          v-for="(item, index) of methodInfo.steps"
          :key="index"
        >
          <view class="left-wrap">
            <span class="number">{{ index + 1 }}</span>
            <view
              class="line"
              v-if="index !== methodInfo.steps.length - 1"
            ></view>
          </view>
          <view class="text ml-30 mt-10 pb-20">{{ item }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import { getMenuMethod } from "../../api/menu";

const { safeAreaInsets } = uni.getSystemInfoSync();
let capsuleInfo = uni.getMenuButtonBoundingClientRect();

onLoad((params) => {
  if (params.id) {
    getMenuMethod({
      id: params.id,
    }).then((res) => {
      if (res.code === 0) {
        res.data.ingredients = res.data.ingredients?.split("、");
        res.data.steps = res.data?.method?.split("；") || [];
        methodInfo.value = res.data;
      }
    });
  }
});

const backTo = () => {
  uni.navigateBack();
};
let methodInfo = ref({});
</script>

<style scoped lang="scss">
@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-12rpx);
  }

  40%,
  100% {
    transform: translateY(0);
  }
}

@keyframes sizeFrame {
  0% {
    background-size: 300% 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

.error-wrap {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    135deg,
    rgba(255, 225, 223, 0.8) 0%,
    rgba(255, 225, 223, 0.6) 33%,
    rgba(255, 225, 223, 0.4) 66%,
    rgba(255, 225, 223, 0.3) 100%
  );
  background-size: 100% 100%;
  background-position: 100% 0;
  animation: sizeFrame 4s infinite;

  .text {
    color: #333;
    font-size: 28rpx;
    display: inline-block;
    animation: upDown 1.5s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
  }
}

.method {
  .image-info {
    align-items: center;
    font-size: 36rpx;
  }

  .ingredients {
    padding-left: 36rpx;
    align-items: center;

    .value {
      :deep(.tag-class) {
        padding: 5rpx 16rpx;
        font-size: 24rpx;
      }
    }
  }

  .steps {
    padding: 0 36rpx;

    .content {
      letter-spacing: 2px;

      .step-item {
        .left-wrap {
          position: relative;

          .number {
            background-color: #4d80f0;
            border-radius: 50%;
            width: 64rpx;
            height: 64rpx;
            line-height: 64rpx;
            color: #fff;
            text-align: center;
            display: inline-block;
            z-index: 2;
            position: relative;
          }

          .line {
            z-index: 1;
            height: calc(100% + 20rpx);
            left: 50%;
            top: 0;
            width: 1px;
            position: absolute;
            transform: scaleX(0.5);
            background-color: rgba(0, 0, 0, 0.15);
          }
        }

        .text {
          height: 112rpx;
          color: rgba(0, 0, 0, 0.45);
          font-size: 28rpx;
          overflow-y: auto;
        }
      }
    }
  }
}
</style>
